<script>
export default {
	methods: {
		save(){
			console.log(this.colors);
		}
	},
  data () {
    return {
        colors: [{
            text: "Aquamarine"
        }, {
            text: "Hotpink"
        }, {
            text: "Gold"
        }, {
            text: "Crimson"
        }, {
            text: "Blueviolet"
        }, {
            text: "Lightblue"
        }, {
            text: "Cornflowerblue"
        }, {
            text: "Skyblue"
        }, {
            text: "Burlywood"
        }]
    }
  }
}
</script>

<template>
  <div class="color-list">
      <div
          class="color-item"
          v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
          :key="color.text"
      >{{color.text}}</div>
			<div style="text-align: center;margin-top:10px;">
				<span @click="save" style="padding:5px 10px;background: #009de6;color: #fff;cursor:pointer;">保存</span>
			</div>
  </div>
</template>
<style media="screen" scoped>
	.color-list{
		width: 300px;
		margin: 0 auto;
	}
	.color-item{
		height: 30px;
		width: 100%;
		border:1px solid #ccc;
		margin-top: 10px;
	}
</style>
